import React, { useState } from 'react';
import { Button, Modal } from 'antd';
import { connect } from 'react-redux';
import { Checkbox, Form, Input } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';

export const AddModel = ({ addModelshow ,closeAddModel}: any) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [size, setSize] = useState<SizeType>('large');

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    closeAddModel(false);
  };

  const handleCancel = () => {
    closeAddModel(false);
  };
  //   表单内容
  const onFinish = (values: any) => {
    console.log('Success:', values);
    closeAddModel(false,values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <Modal
        title="添加客服"
        open={addModelshow}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="客服名"
            name="kefu_name"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="kefu_password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" size={size} style={{margin:' 0 20px'}}>
            确定
          </Button>
          <Button type="primary" htmlType="submit" size={size} >
            取消
          </Button>
          </Form.Item>
          
        </Form>
      </Modal>
    </div>
  );
};

const mapStateToProps = (state: any) => ({});

export default connect(mapStateToProps)(AddModel);
